<template>
  <div>
    <div>
      <el-dialog title="添加教师" :visible.sync="dialogAddVisible" :close-on-click-modal="false">
        <el-form ref="addForm" :model="addForm" :rules="rules">
          <el-form-item label="姓名" prop="Name">
            <el-input v-model="addForm.Name" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item label="学校" prop="Org_id">
            <el-select v-model="addForm.Org_id">
              <el-option
                v-for="item in orgData"
                :key="item.Id"
                :label="item.Name"
                :value="item.Id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码" prop="Phone">
            <el-input v-model="addForm.Phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="Email">
            <el-input v-model="addForm.Email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="职务" prop="Duty">
            <el-input v-model="addForm.Duty" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="教师编号" prop="Tno">
            <el-input v-model="addForm.Tno" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="handleAddCancel">取 消</el-button>
          <el-button type="primary" @click="handleAddConfirm">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="提示" :visible.sync="dialogDeleteVisible" :close-on-click-modal="false">
        <span>是否删除该教师</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleDeleteCancel">取 消</el-button>
          <el-button type="primary" @click="handleDeleteConfirm">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="编辑教师" :visible.sync="dialogEditVisible" :close-on-click-modal="false">
        <el-form ref="editForm" :model="editForm" :rules="rules">
          <el-form-item label="姓名" prop="Name">
            <el-input v-model="editForm.Name" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="Phone">
            <el-input v-model="editForm.Phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="Email">
            <el-input v-model="editForm.Email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="职务" prop="Duty">
            <el-input v-model="editForm.Duty" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="教师编号" prop="Tno">
            <el-input v-model="editForm.Tno" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="handleEditCancel">取 消</el-button>
          <el-button type="primary" @click="handleEditConfirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <wrap :is-form="true">
      <el-form ref="searchForm" :inline="true" :model="searhForm" :rules="searchRules">
        <el-form-item label="教师姓名" prop="Name">
          <el-input v-model="searhForm.Name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </wrap>   

    <wrap v-loading="tableLoading">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="handleAddOpen">添加教师</el-button>
      <el-table
        :data="tableDataPart"
        style="width: 100%">
        <el-table-column
          prop="Name"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="Org_name.String"
          label="学校名称">
        </el-table-column>
        <el-table-column
          prop="Phone"
          label="手机号码">
        </el-table-column>
        <el-table-column
          prop="Email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          prop="Duty"
          label="职务">
        </el-table-column>
        <el-table-column
          prop="Tno"
          label="教师编号">
        </el-table-column>
        <el-table-column
          prop="Create_time"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="Update_time"
          label="更新时间">
        </el-table-column>
        <el-table-column
          width="200"
          label="操作">
          <template v-slot="scope">
            <el-button
              size="small"
              plain
              type="primary"
              icon="el-icon-edit-outline"
              @click="handleEditOpen(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="small"
              type="danger"
              plain
              icon="el-icon-delete"
              @click="handleDeleteOpen(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
    </wrap>
  </div>  
</template>

<script>
import Wrap from '@/components/Wrap'
import { deepClone } from '@/utils/index'
import { orgGet } from '@/api/org'
import { teacherGet, teacherAdd, teacherDelete, teacherEdit } from '@/api/teacher'
export default {
  components: {
    Wrap
  },
  data() {
    return {
      dialogAddVisible: false,
      dialogEditVisible: false,
      dialogDeleteVisible: false,
      editIndex: 0,
      deleteIndex: 0,
      currentPage: 1,
      pagesize: 10,
      tableData: [],
      tableDataCopy: [],
      orgData: [],
      tableLoading: true,
      rules: {
        Name: [
          { required: true, message: '请输入姓名' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符' }
        ],
        Org_id: [
          { required: true, message: '请选择学校' }
        ],  
        Phone: [
          { required: true, message: '请输入手机号码' },
          { pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/, message: '请输入合法手机号码' }
        ],
        Email: [
          {  required: true, message: '请输入邮箱' },
          {  type: 'email', message: '请输入合法邮箱' }
        ],        
        Duty: [
          { required: true, message: '请输入职务' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符' }
        ],        
        Tno: [
          { required: true, message: '请输入教师编号' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符' }
        ]
      },
      searchRules: {
        Name: [
          { min: 0, max: 20, message: '长度在 20 个字符以内' }
        ]
      },
      addForm: {
        Name: '',
        Org_id: '',
        Phone: '',
        Email: '',
        Duty: '',
        Tno: ''
      },
      editForm: {
        Id: '',
        Name: '',
        Org_id: '',
        Phone: '',
        Email: '',
        Duty: '',
        Tno: ''
      },
      searhForm: {
        Name: '',
      }
    }
  },
  computed: {
    tableDataPart() {
      return this.tableData.slice((this.currentPage - 1) * this.pagesize, this.currentPage * this.pagesize)
    }
  },
  mounted() {
    Promise.all([orgGet(), teacherGet()]).then(res => {
      this.orgData = res[0].data
      this.tableData = res[1].data
      this.tableDataCopy = deepClone(res[1].data)
      this.tableLoading = false
    }).catch(err => {
      this.tableLoading = false
    })
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleAddOpen() {
      this.dialogAddVisible = true
    },
    handleEditOpen(index, row) {
      this.editIndex = index
      this.editForm = deepClone(this.tableData[index])
      this.dialogEditVisible = true
    },
    handleDeleteOpen(index, row) {
      this.deleteIndex = index
      this.dialogDeleteVisible = true
    },
    handleAddConfirm() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.tableLoading = true
          teacherAdd(this.addForm).then(res => {
            this.tableData.unshift(res.data)
            this.dialogAddVisible = false
            this.tableLoading = false
          }).catch(err => {
            this.tableLoading = false
          })
        }
      })
    },
    handleAddCancel() {
      this.dialogAddVisible = false
    },
    handleDeleteConfirm() {
      this.tableLoading = true
      teacherDelete({
        id: this.tableData[this.deleteIndex].Id
      }).then(res => {
        this.tableData.splice(this.deleteIndex, 1)
        this.dialogDeleteVisible = false
        this.tableLoading = false
      }).catch(err => {
        this.tableLoading = false
      })
    },
    handleDeleteCancel() {
      this.dialogDeleteVisible = false
    },
    handleEditConfirm() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.tableLoading = true
          teacherEdit(this.editForm).then(res => {
            this.$set(this.tableData, this.editIndex, res.data)
            this.dialogEditVisible = false
            this.tableLoading = false
          }).catch(err => {
            this.tableLoading = false
          })
        }
      })
    },
    handleEditCancel() {
      this.dialogEditVisible = false
    },
    handleSearch() {
      this.$refs.searchForm.validate(valid => {
        if (valid) {
          this.tableLoading = true
          teacherGet(this.searhForm).then(res => {
            this.tableData = res.data
            this.tableDataCopy = deepClone(res.data)
            this.tableLoading = false
          }).catch(err => {
            this.tableLoading = false
          })
        }
      })
    },
    handleReset() {
      this.tableLoading = true
      this.searhForm.Name = ''
      teacherGet().then(res => {
        this.tableData = res.data
        this.tableDataCopy = deepClone(res.data)
        this.tableLoading = false
      }).catch(err => {
        this.tableLoading = false
      })        
    }
  }
}
</script>

<style scoped>

</style>
